<script setup>
import { ref, reactive } from 'vue'
import {
    getProduct,
    addOrUpdateDevice,
    getDeviceType,
    getDeviceDetail,
    addUpdateDevice,
} from '@/assets/api/device'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
const route = useRoute()
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    activeData: {
        type: Object,
        default() {
            return null
        },
    },
    title: {
        type: String,
        default: '',
    },
    deviceClassId: {
        type: String,
        default: '1001',
    },
    deviceClassify: {
        type: String,
        default: '1',
    },
})
const emits = defineEmits(['update:visible'])
function closeAction() {
    emits('update:visible', false)
}
const productList = ref([])
const newFormRef = ref()
// const newForm = reactive({
//     name: '',
// })
const formRules = reactive({
    // name: [
    //     {
    //         required: true,
    //         message: '请输入名称',
    //     },
    // ],
    // position: [
    //     {
    //         required: true,
    //         message: '安装地址不能为空',
    //     },
    // ],
    // productId: [
    //     {
    //         required: true,
    //         message: '请选择产品',
    //     },
    // ],
    // // IP: [
    // //     {
    // //         required: true,
    // //         message: 'IP不能为空',
    // //     },
    // // ],
})
function submitAction() {
    newFormRef.value.validate((valid, fields) => {
        if (valid) {
            const params = Object.assign(
                {
                    deviceClassify: props.deviceClassify,
                    deviceClass: props.deviceClassId,
                    is_children: 1,
                    trans_device_code: route.query.number,
                },
                newForm.value
            )
            if (props.title == '新增通道') {
                addOrUpdateDevice(params).then((res) => {
                    if (res.code == 0) {
                        emits('update:visible', false)
                        emits('getData', 1)
                        getData()
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    }
                })
            } else {
                addUpdateDevice(params).then((res) => {
                    if (res.code == 0) {
                        emits('update:visible', false)
                        emits('getData', 1)
                        getData()
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
const typeList = ref([])
function getData() {
    const { deviceClassId } = props
    getProduct({ deviceClassId }).then((res) => {
        //产品
        productList.value = res.data
    })
    getDeviceType({ deviceClassId }).then((res) => {
        typeList.value = res.data
    })
}
getData()
const createFormData = () => ({
    name: '',
    number: '',
    position: '',
    deviceType: '',
    cameraAccount: '',
    cameraPassword: '',
    cameraIp: '',
    cameraPort: '',
    productId: '',
    installTime: '',
})
const newForm = ref([])
const newAction = () => {
    Object.assign(newForm.value, createFormData())
}
const getDetail = (id) => {
    getDeviceDetail({ id }).then((res) => {
        const {
            id,
            name,
            number,
            install_time,
            position,
            device_type,
            product_id,
            camera_ip,
            camera_port,
            camera_account,
            camera_password,
        } = res.data
        Object.assign(newForm.value, {
            id,
            name,
            number,
            position,
            deviceType: device_type,
            cameraAccount: camera_account,
            cameraPassword: camera_password,
            cameraIp: camera_ip,
            cameraPort: camera_port,
            productId: product_id,
            installTime: install_time, // ip,
        })
    })
}

defineExpose({
    newAction,
    getDetail,
})
</script>

<template>
    <el-dialog
        :model-value="visible"
        :title="title"
        width="450px"
        :draggable="true"
        @close="closeAction"
    >
        <el-form
            ref="newFormRef"
            :model="newForm"
            label-width="100px"
            :rules="formRules"
        >
            <!-- <el-form-item label="通道ID" prop="name">
                <el-input v-model="newForm.id" />
            </el-form-item> -->
            <!-- <el-form-item label="名称" prop="name">
                <el-input v-model="newForm.name" />
            </el-form-item>
            <el-form-item label="安装地址" prop="name">
                <el-input v-model="newForm.address" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select
                    v-model="newForm.status"
                    placeholder="请选择"
                    class="full"
                >
                    <el-option label="正常" value="2" />
                    <el-option label="不正常" value="1" />
                </el-select>
            </el-form-item> -->
            <el-form-item
                label="名称"
                prop="name"
                :rules="[
                    {
                        required: true,
                        message: '请输入名称',
                        trigger: 'input',
                    },
                ]"
            >
                <el-input v-model="newForm.name" />
            </el-form-item>
            <el-form-item
                label="通道ID"
                prop="number"
                :rules="[
                    {
                        required: true,
                        message: '请输入通道ID',
                        trigger: 'input',
                    },
                ]"
            >
                <el-input v-model="newForm.number" />
            </el-form-item>
            <el-form-item
                label="安装位置"
                prop="position"
                :rules="[
                    {
                        required: true,
                        message: '请输入安装位置',
                        trigger: 'input',
                    },
                ]"
            >
                <el-input v-model="newForm.position" />
            </el-form-item>
            <el-form-item
                label="设备类型："
                prop="deviceType"
                :rules="[
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change',
                    },
                ]"
            >
                <el-select
                    class="full"
                    v-model="newForm.deviceType"
                    placeholder="请选择"
                >
                    <el-option
                        :label="item.name"
                        :value="item.id"
                        v-for="(item, key) in typeList"
                        :key="key"
                        :disabled="item.id == '2002' || item.id == '2003'"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                label="产品"
                prop="productId"
                :rules="[
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change',
                    },
                ]"
            >
                <el-select
                    class="full"
                    v-model="newForm.productId"
                    placeholder="请选择"
                >
                    <el-option
                        :label="item.name"
                        :value="item.id"
                        v-for="(item, key) in productList"
                        :key="key"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                label="安装日期："
                prop="installTime"
                :rules="[
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change',
                    },
                ]"
            >
                <el-date-picker
                    v-model="newForm.installTime"
                    placeholder="请选择"
                    type="date"
                    value-format="YYYY-MM-DD"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item
                label="账号"
                prop="cameraAccount"
                :rules="[
                    {
                        required: true,
                        message: '请输入账号',
                        trigger: 'input',
                    },
                ]"
            >
                <el-input v-model="newForm.cameraAccount" />
            </el-form-item>
            <el-form-item
                label="密码"
                prop="cameraPassword"
                :rules="[
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'input',
                    },
                ]"
            >
                <el-input type="password" v-model="newForm.cameraPassword" />
            </el-form-item>
            <el-form-item
                label="IP"
                prop="cameraIp"
                :rules="[
                    {
                        required: true,
                        message: '请输入IP',
                        trigger: 'input',
                    },
                ]"
            >
                <el-input v-model="newForm.cameraIp" />
            </el-form-item>
            <el-form-item
                label="端口"
                prop="cameraPort"
                :rules="[
                    {
                        required: true,
                        message: '请输入端口',
                        trigger: 'input',
                    },
                ]"
            >
                <el-input v-model="newForm.cameraPort" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeAction">取消</el-button>
                <el-button type="primary" @click="submitAction">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped></style>
